<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不使用滚动条实现鼠标拖拽滚动</title>
</head>
<style>
    .scroll-wapper {
        width: 200px;
        border: 1px solid black;
        margin: 0 auto;

        white-space: nowrap;
        overflow: scroll;
        user-select: none;
        scrollbar-width: none;
    }
</style>
<body>
    <div class="scroll-wapper">
        <span>鼠标拖拽滚动……这是一段阿斯顿建立快速的建立快速调集了卡奖三等奖阿斯顿建立快速打击</span>
    </div>
</body>
</html>
<script>
    const scrollWapper = document.querySelector('.scroll-wapper');
    let isDragging = false;
    let currentX = 0;
    let initialX = 0;
    scrollLeft = 0;

    function scrollMousedown(e) {
        isDragging = true;
        initialX = e.clientX - currentX;
        scrollLeft = scrollWapper.scrollLeft;
    }

    function scrollMousemove(e) {
        if (!isDragging) return;
        e.preventDefault();
        currentX = e.clientX - initialX;
        scrollWapper.scrollLeft = scrollLeft - currentX;
    }

    function scrollMouseup(e) {
        isDragging = false;
        currentX = 0;
        initialX = 0;
    }

    // 鼠标横向拖拽滚动
    scrollWapper.addEventListener('mousedown', scrollMousedown);
    window.addEventListener('mousemove', scrollMousemove);
    window.addEventListener('mouseup', scrollMouseup);
</script>
